<!DOCTYPE>
<html>
<head>
<!-- 浏览器中显示自己的图表-->
<link rel="icon" href="../img/coco.png" type="image/x-icon" />
<link rel="shortcut icon" href="../img/coco.png" type="image/x-icon" />
<title>vue.js demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="vue.js学习" />
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
    <body>
        <div>
            <audio controls autoplay="autopaly">
                <source src="renxi.mp3" type="audio/mp3" />
            </audio>
        </div>
    	<div id="app">
            <button v-on:click="counter += 1">增加1</button>
            <p>这个按钮被点击了{{ counter }}次。。。</p>
            <br>
            <button v-on:click="greet">Greet</button>
            <button v-on:click="say('hi')"> Say hi</button>
            <button v-on:click="say('what')">Say what</button>
        </div>

      <script>
        var app = new Vue({
          el:'#app',
          data:{
            counter: 0,
              name:'Vue.js'
          },
            methods:{
              greet:function(event){
                  alert('Hello  ' + this.name + '!')
                  if(event){
                      alert(event.target.tagName)
                  }
              },
              say:function(message){
                  alert(message)
              }
            }
        })
          app.greet();
      </script>
    </body>
</html>
